<template>
  <view class="container">
    <!-- 搜索栏 -->
    <SearchBar @search="handleSearch" />
    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 空数据提示 -->
    <view v-else-if="filteredConsultants.length === 0" class="empty">
      <text>暂无咨询师信息</text>
    </view>

    <!-- 轮播图 -->
    <swiper :indicator-dots="true" circular autoplay="true" interval="2000" duration="500" class="swiper-box">
      <block v-for="(item, index) in banners" :key="index">
        <swiper-item>
          <image :src="item.pic_url" class="swiper-image" />
        </swiper-item>
      </block>
    </swiper>

    <!-- 功能图标 -->
    <view class="function-icons">
      <view class="icon-item" @click="navigateTo('/pages/other/test')">
        <uni-icons type="paperclip" class="icon" size="30" />
        <text class="icon-label">测试</text>
      </view>
      <view class="icon-item" @click="navigateTo('/pages/other/article')">
        <uni-icons type="wallet" class="icon" size="30" />
        <text class="icon-label">文章</text>
      </view>
    </view>

    <!-- 推荐咨询师列表标题行 -->
    <view class="consultant-list-header">
      <text class="header-title">咨询师推荐</text>
      <navigator url="/pages/user/consult/consult" open-type="reLaunch" class="header-more">
        <text>更多</text>
      </navigator>
    </view>

    <!-- 推荐咨询师列表 -->
    <view class="consultant-list">
      <view
        class="consultant-item"
        v-for="consultant in filteredConsultants"
        :key="consultant.psy_id"
        @click="goToDetail(consultant.psy_id)"
      >
        <image class="consultant-avatar" :src="consultant.psy_pic" mode="aspectFill"></image>
        <text class="consultant-name">{{ consultant.psy_name }}</text>
      </view>
    </view>

    <!-- 引入TabBar组件 -->
    <TabBar :tabs="tabList" :initialSelectedIndex="0" />
  </view>
</template>

<script>
import SearchBar from '../components/SearchBar.vue';
import TabBar from '../components/TabBar.vue';

export default {
  components: {
    SearchBar,
    TabBar
  },
  data() {
    return {
      banners: [], // 轮播图数据
      consultants: [], // 咨询师数据
      filteredConsultants: [], // 根据筛选条件过滤后的咨询师列表
      isLoading: false, // 加载状态
      searchKeyword: '', // 搜索关键词
      tabList: [
        {
          pagePath: '',
          text: '首页',
          icontype: 'home',
          selectedIcontype: 'home-filled'
        },
        {
          pagePath: '/pages/user/consult/consult',
          text: '咨询',
          icontype: 'calendar',
          selectedIcontype: 'calendar-filled'
        },
        {
          pagePath: '/pages/user/my/my',
          text: '我的',
          icontype: 'person',
          selectedIcontype: 'person-filled'
        }
      ]
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 处理搜索
    handleSearch(keyword) {
      this.searchKeyword = keyword;
      this.filterConsultants();
    },
    // 根据关键词过滤咨询师列表
    filterConsultants() {
      if (this.searchKeyword) {
        this.filteredConsultants = this.consultants.filter(
          (consultant) =>
            consultant.psy_name.includes(this.searchKeyword) || // 匹配姓名
            consultant.psy_id.toString().includes(this.searchKeyword) // 匹配ID
        );
      } else {
        this.filteredConsultants = this.consultants;
      }
    },
    // 跳转到详情页
    goToDetail(consultantId) {
      uni.navigateTo({ url: `/pages/user/consult/consultantDetail?id=${consultantId}` });
    },
    // 获取数据
    async fetchData() {
      this.isLoading = true;
      try {
        const [bannersRes, consultantsRes] = await Promise.all([
          uni.request({ url: `http://127.0.0.1:5001/api_1_0/sysRotationPic` }),
          uni.request({ url: 'http://127.0.0.1:5001/api_1_0/psyConsultant' })
        ]);
        this.banners = bannersRes.data.data;
        this.consultants = consultantsRes.data.data;
        this.filteredConsultants = this.consultants; // 初始化过滤后的列表
      } catch (error) {
        console.error('获取数据失败', error);
        uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
      } finally {
        this.isLoading = false;
      }
    },
    // 跳转到指定页面
    navigateTo(url) {
      uni.navigateTo({ url });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  padding-bottom: 50px; /* 为了不被TabBar遮挡，留出一些空间 */
}

/* 轮播图 */
.swiper-box {
  height: 250px; /* 轮播图高度 */
  margin-bottom: 20px;
}

.swiper-image {
  width: 100%;
  height: 250px;
  border-radius: 10px; /* 圆角 */
}

/* 功能图标 */
.function-icons {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around; /* 均匀分布 */
  margin-top: 20px; /* 与轮播图的间距 */
}

.icon-item {
  /* 单个图标 */
  text-align: center;
  cursor: pointer;
}

.icon {
  /* 图标 */
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto; /* 在父容器中水平居中，同时它的上下外边距为0 */
}

.icon-label {
  /* 图标下方文字 */
  margin-top: 2px; /* 图标与文字的间距 */
  font-size: 14px; /* 字体大小 */
  color: #333;
}

/* 推荐标题行 */
.consultant-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

.header-more {
  font-size: 16px;
  color: #000000;
}

/* 推荐列表 */
.consultant-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 均匀分布 */
}

.consultant-item {
  display: flex;
  flex-direction: column; /* 垂直排列头像和名字 */
  align-items: center;
  margin-bottom: 20px;
  width: 48%; /* 每行显示两个，留出一些间距 */
}

.consultant-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px; /* 头像和名字之间的间距 */
}

.consultant-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center; /* 文字居中 */
}

.loading,
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 16px;
  color: #666;
}
</style>